<style>
  .cm-wrap {
    /* display: flex;
  flex-direction: column; */
    background-color: #d3d6f6;
    padding: 5px;
  }

  .cm-wrap button,
  input,
  textarea {
    min-width: 32px;
    height: 24px;
    font-size: 12px;
    line-height: 100%;
    display: inline-block;
  }

  .cm-wrap textarea {
    height: auto;
    line-height: 16px;
  }

  .cm-wrap fieldset {
    font-size: 14px;
    border-bottom: 1px solid #dfdfdf;
  }

  .cm-wrap fieldset+fieldset {
    margin-top: 10px;
  }

  .cm-wrap legend {
    font-size: 16px;
    font-weight: bold;

  }

  .cm-wrap #lyricsPlayer {
    width: 100%;
    height: 100px;
  }
  .cm-wrap .resourceItem{
    display: flex;
    flex-wrap: nowrap;
  }
</style>
<div class="cm-wrap">
  <fieldset>
    <legend>操作</legend>
    <span  id="initCopyMusicText">未初始化</span>
    <button id="initCopyMusic" class="btn btn-primary">初始化</button>
    <button id="destroyCopyMusic" class="btn btn-primary">反初始化</button>
    <button id="loginAndInitCopyMusic" class="btn btn-primary">登录房间并初始化</button>
  </fieldset>
  <fieldset>
    <legend>扩展请求</legend>
    CMD:
    <input id="extendedCmd" aria-describedby="emailHelp" placeholder="cmd" value="/search/song">
    <br>
    请求参数:
    <textarea name="" id="extendedParams" cols="30" rows="6">{
    "keyword": "茉莉雨",
    "page": 1,
    "filter": [1],
    "vendor_id": 2
    }</textarea>
    <button type="button" id="sendExtendedRequest" class="btn btn-primary btn-sm w120">发送请求</button>
    <label for="extendedResult">请求结果：</label>
    <br>
    <textarea name="" id="extendedResult" style="width:100%;" cols="30" rows="10"></textarea>
  </fieldset>
  <fieldset>
    <legend>点歌</legend>
    songID:
    <input id="songID" placeholder="songID" value="120278">
    <br>
    vendorID(0 默认音速达，1 音速达，2 音集协):
    <input id="vendorID" placeholder="songID" value="2">
    <br>
    资源类型:
    <select id="resourceType">
      <option value="0">歌曲</option>
      <option value="1" selected>伴奏</option>
      <option value="2">片段</option>
      <option value="3213">不存在的vendor</option>
    </select>
    <button type="button" id="requestResource" class="btn btn-primary">获取资源</button>
    <button type="button" id="requestSharedResource" class="btn btn-primary ">获取共享资源</button>
    <textarea name="" id="requestResourceResult" style="width:100%;" cols="30" rows="4"></textarea>
    资源列表:
    <div id="resourceList">
    </div>
    <div style="display: flex; flex-wrap: wrap;">
      <button id="mixingSong" class="btn btn-primary ">混音伴奏</button> |
      <button id="stopMixingSong" class="btn btn-primary ">停止混音</button>|
      <button id="switchSongTrack" class="btn btn-primary ">原唱/伴奏</button>|
      <button id="clearSongCache" class="btn btn-primary ">清除缓存</button>|
      <button id="resetResourceList" class="btn btn-primary ">重置资源列表</button>
      <input id="mixingAudioDelay" placeholder="delay" value="0">
      <button id="setMixingAudioDelay" class="btn btn-primary ">设置混音延迟</button> 
    </div>
    音乐播放器：

    <button id="playSongPlayer" class="btn btn-primary ">播放</button>|
    <button id="pauseSongPlayer" class="btn btn-primary ">暂停</button>
    <div style="display: flex; flex-wrap: wrap;">
      <div>伴奏<audio id="copyAccompanyPlayer" playsinline controls></audio></div>
      <div> 原曲<audio id="copySongPlayer" playsinline controls></audio></div>
    </div>
    <br>
    音量调节:
    <br>
    麦克风音量：  <input type="range" id="micVolumeInput" min="0" max="200" value="100">
    伴奏音量：  <input type="range" id="songVolumeInput" min="0" max="100" value="100">
    <br>
    歌词展示：
    <input id="krcToken" placeholder="krcToken" value="">
    <button id="getKrc" class="btn btn-primary ">获取KRC</button>
    <button id="getLrc" class="btn btn-primary ">获取LRC</button>
    <div id="lyricsPlayer"></div>
  </fieldset>
</div>